<%@ page language="java" contentType="text/html;UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="../base.jsp" %>
<%@include file="../draw.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>图表分析</title>
<%
String today = (String)request.getAttribute("todaystatics");
String todaysum = (String)request.getAttribute("todaysum");
Map<String,Float> todaymap = (Map<String,Float>)request.getAttribute("todaymap");
%>

<script class="code" type="text/javascript">
function showtypesum()
{
	var begintype = $('#begintype').combobox('getValue');
	var endtype = $('#endtype').combobox('getValue');
	var typeids = $('#typesum').combobox('getValues');
	typeids = typeids+"";
	$.get("<c:url value="/balance/staticTypeSum.html"/>?begintype="+begintype+"&endtype="+endtype+"&typeids="+typeids,
			function(data,statusText){
		$("#typedetail").html(data);
	},"html");
	$("html,body").animate({scrollTop: $("#begintype").offset().top}, 1000);
}


function showdetail()
{
	var begindetail = $('#begindetail').combobox('getValue');
	var enddetail = $('#enddetail').combobox('getValue');
	var typeid = $('#cc').combobox('getValue');
	$('#consumelist').datagrid({pageNumber:'1'});
	$('#consumelist').datagrid({url:'<c:url value="/balance/allmoneylistdetail.html"/>?begindetail='+begindetail+'&enddetail='+enddetail+'&typeid='+typeid});
	$('#consumelist').datagrid('reload');
	$("html,body").animate({scrollTop: $("#begindetail").offset().top}, 1000);
}


$(document).ready(function(){
$("#begind").datebox({
	formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
	});
$("#endd").datebox({
	formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
	});
$("#begindetail").datebox({
	formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
	});
$("#enddetail").datebox({
	formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
	});
$("#begintype").datebox({
	formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
	});
$("#endtype").datebox({
	formatter: function(date){ return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();},
    parser: function(date){ return new Date(Date.parse(date.replace(/-/g,"/")));}
	});
});



function showv()
{
	var begindate = $("#begind").combobox('getValue');
	var enddate = $("#endd").combobox('getValue');
	
	

	$.post("<c:url value="/balance/staticQuery.html"/>","begind="+begindate+"&endd="+enddate,
			function show1(rs,statusText){
				var obj = eval("(" + rs + ")");//这一句很关键，是把字符串对象转化成json对象
				$('#detail').html(rs+"");
				$('#pie1').html("");
				var plot1 = $.jqplot('pie1', [obj.data],{
			        gridPadding: {top:0, bottom:38, left:0, right:0},
			        seriesDefaults:{
			            renderer:$.jqplot.PieRenderer, 
			            trendline:{ show:false }, 
			            rendererOptions: { padding: 8, showDataLabels: true }
			        },
			        legend:{
			            show:true, 
			            placement: 'outside', 
			            rendererOptions: {
			                numberRows: 1
			            }, 
			            location:'s',
			            marginTop: '15px'
			        }       
			    });
		$('#detail').html("<font color='green'>总的花费:</font><font color='blue'>"+obj.summoney+"元</font><br>");
		
		for(x in obj.data)
			{
			$('#detail').append("<font color='brown'>"+obj.data[x]+"元</font><br>");
			}
		
		},"html");
	
	
	
}

$(document).ready(function(){
	var data = <%=today%>
	var plot1 = $.jqplot('pie1', [data], {
        gridPadding: {top:0, bottom:38, left:0, right:0},
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer, 
            trendline:{ show:false }, 
            rendererOptions: { padding: 8, showDataLabels: true }
        },
        legend:{
            show:true, 
            placement: 'outside', 
            rendererOptions: {
                numberRows: 1
            }, 
            location:'s',
            marginTop: '15px'
        }       
    });
	$('#detail').html("<font color='green'>今天的花费:</font><font color='blue'>"+<%=todaysum%>+"元</font><br>");
	<%
	for(String s:todaymap.keySet())
	{
	%>
	$('#detail').append("<font color='green'>"+"<%=s%>"+":</font><font color='blue'>"+<%=todaymap.get(s)%>+"元</font><br>");
	<%
	}
	%>
	
	
	
	
	
	$('#consumelist').datagrid({
		title:'我的消费明细单',
		iconCls:'icon-save',
		width:1050,
		height:350,
		nowrap: true,
		autoRowHeight: false,
		striped: true,
		collapsible:true,
		url:'<c:url value="/balance/allmoneylistdetail.html"/>',
		sortName: 'date',
		sortOrder: 'desc',
		remoteSort: false,
		idField:'id',
		frozenColumns:[[
           // {field:'ck',checkbox:true},
            {title:'编号',field:'id',width:60,sortable:true}
		]],
		columns:[[
			{field:'type',title:'花钱类别',width:120},
			{field:'amount',title:'金额',width:120},
			{field:'use',title:'具体用途',width:350},
			{field:'mood',title:'当时的心情',width:250},
			{field:'date',title:'时间',width:150}
		]],
		pagination:true,
		rownumbers:true
		
	});
	var p = $('#consumelist').datagrid('getPager');
	$(p).pagination({
		pageSize: 10,//每页显示的记录条数，默认为10 
        pageList: [10],//可以设置每页记录条数的列表 
        beforePageText: '第',//页数文本框前显示的汉字 
        afterPageText: '页    共 {pages} 页', 
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
	});
	

	
});
</script>

</head>
<body>
<img src="<c:url value="/ico/egg.jpg"/>" height="50"><font class="thick">用图形来分析分析数据</font><br>
<div class="demo-info">
	<div class="demo-tip icon-tip"></div>
	<div>图表分析</div>
</div>		
<a href="<c:url value="/App.html"/>" class="easyui-linkbutton">首页</a>
<a href="<c:url value="/balance.html"/>" class="easyui-linkbutton" >我的钱到哪儿去了</a><br>
<font color="green" ><strong>一、统计一段时间内的消费比例：</strong></font><br>
起始时间：<input id="begind" class="easyui-datebox" required="required" name="typestr" data-options="editable:false"></input>
结束时间：<input id="endd" class="easyui-datebox" required="required" name="typestr" data-options="editable:false"></input>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick='showv()'>统计</a>
<div id="pie1" style=" margin-top:20px; margin-left:300px; width:200px; height:200px;"></div><br>
<div id="detail" style=" margin-left:50px"></div><br>

<font color="green" ><strong>二、一段时间内的明细统计：</strong></font><br>
起始时间：<input id="begindetail" class="easyui-datebox" required="required" name="typestr" data-options="editable:false"></input>
结束时间：<input id="enddetail" class="easyui-datebox" required="required" name="typestr" data-options="editable:false"></input>

花钱的种类: 
<input id="cc" class="easyui-combobox" 
			name="language"
			data-options="
			url:'<c:url value="/balance/alltypes.html"/>',
			valueField:'id',
			textField:'text',
			panelHeight:'auto',
			editable:false 
			">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick='showdetail()'>统计</a>
<table id="consumelist"></table><br>

<font color="green" ><strong>三、一段时间内类别合计统计：</strong></font><br>
起始时间：<input id="begintype" class="easyui-datebox" required="required" name="typestr" data-options="editable:false"></input>
结束时间：<input id="endtype" class="easyui-datebox" required="required" name="typestr" data-options="editable:false"></input>
花钱的种类: 
<input id="typesum" class="easyui-combobox" 
			name="language"
			data-options="
			url:'<c:url value="/balance/alltypes.html"/>',
			valueField:'id',
			textField:'text',
			multiple:true,
			panelHeight:'auto',
			editable:false 
			">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick='showtypesum()'>统计</a><br><br>
<div id="typedetail" style=" margin-left:50px"><font color="green">可以获得一个或者多个类别消费的合计</font></div><br>

<%@include file="../botton.jsp" %>
</body>
</html>